import React, { useRef } from 'react'
import './TodoHeader.css'
export default function TodoHeader(props) {
    //解构
    let { addnewTodo } = props;
    //创建一个容器对象，用来装真实DOM元素对象
    let ipt = useRef(); // {current:undefined}
    //创建事件函数
    let addTodo = e => {
        //首先要确定用户敲的键盘按键是否是回车键
        if (e.keyCode === 13) {
            //获取文本框中的value值
            let title = ipt.current.value;
            //当子组件想要向父组件传递数据的时候，默认情况下是不允许的，因为数据流是自顶而下
            //如果一定要将数据传递给父组件的话，需要在父组件中声明可以操作数据的函数
            addnewTodo(title);
            //清空文本框
            ipt.current.value = '';
        }
    }
    return (
        <div className="todo-header">
            <input type="text" placeholder="请输入你的任务名称，按回车键确认" ref={ipt} onKeyUp={addTodo} />
        </div>
    )
}
